<template>
  <div>
    <Navbar
        :appTitle="appTitle"
        @ClickRight="ClickRight"
        :isGoHistory="isGoHistory"
    />
    <div
        class="form-content wrap-apply"
        style="margin-right: 30px;"
        :style="{
        top: GLOBAL.currentEnvironment ? '0' : '',
        height: GLOBAL.currentEnvironment ? '100vh' : 'calc(100vh - 100px)',
        paddingBottom: GLOBAL.currentEnvironment ? '120px' : '',
      }"
    >
      <van-cell-group>
        <van-cell center>
          <template #title>
            <p class=" ">
              <span
                  style="font-size: 0.38rem;
                       font-family: PingFang SC;
                       font-weight: 500;
                       color:#191f25;
                       margin-bottom: 0.16rem;"
              >{{ detailInfo.taskCode || "-" }}</span
              >
            </p>
            <p
                class=""
                style="justify-content: space-between;
                    margin-bottom: 0.23rem;
                    color:#191f25"
            >
              <span></span>业务类型 : {{ detailInfo.typeText || "-" }}
            </p>
            <p
                class=""
                style="justify-content: space-between;
                     margin-bottom: 0.23rem;
                     color:#191f25"
                v-if="detailInfo.type!=='OTHER'"
            >
              <span></span>客户 : {{ detailInfo.customerName || "-" }}
            </p>
          </template>
          <!-- 使用默认插槽自定义内容 -->
          <template #default>
            <p class="" style="color:#fe9400;font-size:0.33rem">
              <span></span>待下发拣货:
              {{
                detailInfo.unPickedDetailsList
                    ? detailInfo.unPickedDetailsList.length
                    : "0"
              }}
            </p>
            <p
                class=""
                style="color:#4bd863;font-size:0.33rem"
                @click="GoReceiptedGoods(item)"
            >
              已下发拣货:
              {{
                detailInfo.pickedDetailsList
                    ? detailInfo.pickedDetailsList.length
                    : "0"
              }}
            </p>
          </template>
        </van-cell>

        <div class="bottomLine" style="height:3px"></div>
        <van-cell style="padding-top:0;padding-bottom:0">
          <template #title>
            <p class="label  FormTit">
              <span style="font-size:0.4rem;color:rgb(25, 31, 37)">拣货员</span>
            </p>
          </template>
          <!-- 使用默认插槽自定义内容 -->
          <template #default>
            <div class="">
              <van-field
                  :is-link="!buildForm.pickerNames"
                  input-align="right"
                  readonly
                  name="picker"
                  v-model="buildForm.pickerNames"
                  @click="onShowContactPickers('picker')"
                  placeholder="请选择"
              >
                <div
                    slot="right-icon"
                    v-show="buildForm.pickerNames"
                    @click.stop="onClearChooseUsers('picker')"
                >
                  <van-icon name="clear" size="16px"/>
                </div>
              </van-field>
            </div>
          </template>
        </van-cell>
        <div class="bottomLine" style="height:3px"></div>

        <div
            class="tabs-contain"
            v-if="
            detailInfo.unPickedDetailsList &&
              detailInfo.unPickedDetailsList.length != 0
          "
        >
          <van-tabs
              v-model:active="active"
              color="#1989fa"
              title-active-color="black"
              swipe-threshold="3"
              line-width="2.4rem"
              @change="changeTab"
          >
            <van-tab
                v-for="(item, index) in detailInfo.unPickedDetailsList"
                :title="item.goodsName"
                :name="item.goodsKey"
                title-class="tab-wrap-ano"
            >
              <div class="list">
                <div class="wrap">
                  <div class="top">
                    <div class="title titleWidth" style="margin-left: 12px;">
                      {{ item.goodsCode }} | {{ item.goodsName }} |
                      {{ item.goodsSpec }}
                    </div>
                  </div>
                  <div class="center">
                    <div>
                      <p>
                        <span class="key">包装规格：</span>
                        <span class="value">{{ item.packageSpec || "-" }}</span>
                      </p>
                      <p>
                        <span class="key">产地：</span>
                        <span class="value">{{ item.address || "-" }}</span>
                      </p>
                      <p>
                        <span class="key">待下发/ 物品数量 ：</span>
                        <span class="value"
                        >{{ item.unissuedNum || "0" }}/{{
                            item.outboundGoodsNum
                          }}</span
                        >
                      </p>
                    </div>
                  </div>
                  <div class="tag-style">
                    <span>{{ item.produceDate || "-" }}</span>
                    <span>{{ item.batchCode || "-" }}</span>
                    <span>{{ item.unitIdText || "-" }}</span>
                  </div>

                  <div
                      style="height: 6px; background-color: #f3f3f3; width: 100%;"
                  ></div>

                  <div class="list">
                    <div
                        class="kw-style"
                        v-for="(p, i) in item.inLatticeDtoList"
                        :key="p.latticeId + p.goodsBatchId"
                        v-show="item.inLatticeDtoList.length != 0"
                    >
                      <van-cell-group>
                        <p
                            class=" otherText"
                            style="display: flex; justify-content: space-between;padding-left: 6px"
                        >
                          库位({{ i + 1 }})
                          <span
                              style="font-weight: 400;
                                  margin-right: 15px;background: #fff;
                                  font-size: 15px;"
                              :style="{
                              color:
                                item.inLatticeDtoList.length > 1
                                  ? '#ff4d4f'
                                  : '#999',
                            }"
                              @click="deleteGoodsLett(index, i, item)"
                          >删除</span
                          >
                        </p>
                        <div class="bottomLine"></div>
                        <van-field
                            label="拣货库位"
                            input-align="right"
                            readonly
                            v-model="p.latticeName"
                            :maxLength="21"
                            right-icon="arrow"
                            placeholder="请选择"
                            @click="showLatticeNotification(index, i,p)"
                        />
                        <div class="bottomLine"></div>
                        <van-field
                            label="拣货批号"
                            input-align="right"
                            readonly
                            v-model="p.batchCode"
                            placeholder="请输入"
                        />
                        <div class="bottomLine"></div>

                        <van-field
                            label="拣货数量"
                            input-align="right"
                            v-model="p.pickingQuantity"
                            placeholder="请输入"
                            @blur="blurPickQuantity(p)"
                            :formatter="(e) => newClearNoNum(e)"
                        />
                      </van-cell-group>
                      <div
                          style="height: 6px; background-color: #f3f3f3; width: 100%;"
                      ></div>
                    </div>
                    <div class="addGoodScontain">
                      <div
                          class="addgoods"
                          @click="showLatticeNotificatios(index)"
                      >
                        <van-icon
                            name="plus"
                            size="16px"
                            color="#1890ff"
                            style="top: 2px"
                        />
                        <a>库位</a>
                      </div>
                      <div class="addgoods">
                        <div
                            class="addgoods"
                            @click="clickCode(index, null, true)"
                        >
                          <van-icon
                              name="scan"
                              size="16px"
                              color="#1890ff"
                              style="top: 2px"
                          />
                          <a>扫库位码</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
          </van-tabs>
          <div
              class="all-down-btn"
              v-show="detailInfo.unPickedDetailsList.length > 3"
          >
            <p @click="openDropDownModel">
              <span>全部</span>
              <span>
                <van-icon name="arrow-down" color="#1989fa" size="16"/>
              </span>
            </p>
          </div>
          <div class="all-down-model" v-show="allDownShow">
            <div class="tags-contain">
              <span
                  class="goodsNameTag"
                  v-for="(item, index) in detailInfo.unPickedDetailsList"
                  @click="clickGoodsNames(item)"
                  :style="{
                  color: item.goodsKey == active ? '#1890ff' : '#333333',
                }"
              >
                {{ item.goodsName }}
              </span>
            </div>
            <div class="ctrBtn-contian">
              <span @click="closeDropDownModel">收起</span>
              <span>
                <van-icon name="arrow-up" color="#1989fa" size="16"/>
              </span>
            </div>
          </div>
        </div>

        <van-empty v-else description="物品明细为空"/>
      </van-cell-group>

      <div class="search-bottoms">
        <van-button :loading="subLoading" loading-text="提交中..." class="btnconfirm" @click="btnConfirm">提交
        </van-button>
      </div>
    </div>
    <!--选择领出人 -->
    <contact-pickers
        :key="userType"
        :visible="showContactPickers"
        :max="5"
        @closePicker="onCloseContactPickers"
        @confirm="confirmChooseUsers"
    ></contact-pickers>

    <!--选择物品 -->
    <goods-pickers
        v-if="showGoodsPicker"
        :listUrl="listUrl"
        :columns="goodsColumns"
        :selectedGoods="entryDetails"
        @getCheckedGoods="getCheckedGoods"
    ></goods-pickers>

    <binLocation-pickers-ak
        v-if="isShowLatticeNotification"
        :selectedGoods="
        detailInfo.unPickedDetailsList[recentGoodsIndex]['inLatticeDtoList']
      "
        @getCheckedValue="getCheckedValues"
        @handleList="getCheckedValue"
        :columns="latticeNotificationgColumns"
        :listUrl="latticeNotificationUrl"
        :checkedShow="asCheckedShow"
        :idkeyAno="'goodsBatchId'"
    >
    </binLocation-pickers-ak>
    <select-list
        v-if="columnsData.listShow"
        :columnsData="columnsData"
        ref="selectList"
        @getCheckedValue="getSelectListValues"
        @handleList="getCheckedValue"
        @operationItem="operationItem"
    >
      <div slot="head" class="selectList" slot-scope="{ item, index }">
        <van-cell-group>
          <div class="list">
            <div class="wrap">
              <div class="top">
                <div class="title titleWidth">
                  {{ item.latticeCode }} | {{ item.latticeName }}
                </div>
              </div>
              <div class="center">
                <div>
                  <p>
                    <span class="key">批号：</span>
                    <span class="value">{{ item.batchCode || "-" }}</span>
                  </p>
                  <p>
                    <span class="key">库存数量：</span>
                    <span class="value">{{ item.stockNum || "-" }}</span>
                  </p>
                  <p>
                    <span class="key">可用数量 ：</span>
                    <span class="value">{{
                        item.stockNum - item.lockQuantity || "-"
                      }}</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <van-cell style="padding-top:0;padding-bottom:0" center>
            <template #title>
              <span class="key">锁定数量</span>
            </template>
            <!-- 使用默认插槽自定义内容 -->
            <template #default>
              <div class="">
                <van-field
                    :is-link="item.lockQuantity"
                    input-align="right"
                    name="picker"
                    v-model="item.lockQuantity"
                    placeholder="请选择"
                >
                </van-field>
              </div>
            </template>
          </van-cell>

          <div class="bottomLine" style="height:8px"></div>
        </van-cell-group>
      </div>
    </select-list>

    <!-- 浏览器扫码组件 -->
    <qrcode
        :qrcode="codeForm.qrcode"
        :showClose="codeForm.showClose"
        v-show="codeForm.qrcode"
        :camera="camera"
        :torchActive="torchActive"
        @switchCamera="switchCamera"
        @ClickFlash="ClickFlash"
        @turnCameraOff="turnCameraOff"
        @onDecode="onDecode"
        @onInit="onInit"
    />

    <!-- 激光扫码组件 -->
    <PDAsao @changeScan="changeScan2"/>

    <!-- 批量扫码弹窗 -->
    <van-popup
        v-model="isshow"
        :overlay="true"
        position="bottom"
        :style="{ height: '50%' }"
        :close-on-click-overlay="false"
    >
      <div class="qrcodeModel" v-if="isshow">
        <div class="nav_contain">
          <van-icon @click="closeModel" :size="20" color="#3ba1ff" name="arrow-left"/>
          <span class="center">
            拣货库位
          </span>
          <span class="right" @click="closeModel">
            确定
          </span>
        </div>
        <div class="kw-list">
          <div class="wrap">
            <div class="top">
              <div class="title titleWidth">
                {{ entryDetails[recentGoodsIndex].goodsCode || "-" }} |
                {{ entryDetails[recentGoodsIndex].goodsName || "-" }} |
                {{ entryDetails[recentGoodsIndex].goodsSpec || "-" }}
              </div>
            </div>
            <div class="center">
              <div>
                <p>
                  <span class="key">产地：</span>
                  <span class="value">{{
                      entryDetails[recentGoodsIndex].address || "-"
                    }}</span>
                </p>
                <p>
                  <span class="key">包装规格：</span>
                  <span class="value">{{
                      entryDetails[recentGoodsIndex].packageSpec || "-"
                    }}</span>
                </p>
                <p
                    style="margin-top: 8px;display: flex;justify-content: space-between;align-items: center;"
                >
                  <span>
                    <van-tag color="#e8f4ff" text-color="#1890ff"
                    >{{ entryDetails[recentGoodsIndex].produceDate || "-" }}
                    </van-tag>
                    <van-tag color="#e8f4ff" text-color="#1890ff">{{
                        entryDetails[recentGoodsIndex].batchCode || "-"
                      }}</van-tag>
                    <van-tag color="#e8f4ff" text-color="#1890ff"
                    >{{ entryDetails[recentGoodsIndex].unitIdText || "-" }}
                    </van-tag>
                  </span>
                  <span
                      style="font-size: 10px;display: flex;flex-direction: column"
                      v-if="entryDetails[recentGoodsIndex]&&entryDetails[recentGoodsIndex].inLatticeDtoList"
                  >
                    <span
                    >已选
                      {{
                        entryDetails[recentGoodsIndex].inLatticeDtoList
                            .length || 0
                      }}</span
                    >
                    <span>拣货合计 {{ pickTotal }}</span>
                  </span>
                </p>
              </div>
            </div>
            <div
                style="height: 6px; background-color: #f3f3f3; width: 100%;"
            ></div>
            <div class="list1">
              <div
                  class=""
                  v-for="(p, i) in entryDetails[recentGoodsIndex]
                  .inLatticeDtoList"
                  :key="p.latticeId+p.batchCode"
                  v-show="
                  entryDetails[recentGoodsIndex].inLatticeDtoList.length != 0
                "
              >
                <p class="otherText" style="padding:6px 4px;margin-bottom: 0;">
                  <span
                      style="font-size: 14px;display: flex;align-items: center;padding-left: 6px"
                  >
                    <span class="icon"></span> {{ p.latticeCode || "-" }}|{{
                      p.latticeName || "-"
                    }}
                  </span>
                  <!--                    :style="{'color': entryDetails[recentGoodsIndex].inLatticeDtoList.length == 1 ?'#5a5a5a':'#ff4d4f' }"-->
                  <span
                      class="deleteStyle"
                      @click="
                      deleteLattice(
                        i,
                        entryDetails[recentGoodsIndex].inLatticeDtoList.length
                      )
                    "
                  >删除</span
                  >
                </p>
                <div class="bottomLine"></div>
                <van-field
                    label="拣货批号"
                    v-model="p.batchCode"
                    readonly
                    type="number"
                    placeholder="请输入"
                    input-align="right"
                >
                </van-field>
                <van-field
                    label="拣货数量"
                    v-model="p.pickingQuantity"
                    type="number"
                    placeholder="请输入"
                    input-align="right"
                    @blur="blurPickQuantity(p)"
                    :formatter="
                    (e) =>
                      newClearNoNum(
                        e,
                        p.available
                      )
                  "
                >
                  <template #right-icon>
                    <span>{{
                        entryDetails[recentGoodsIndex].unitName || ""
                      }}</span>
                  </template>
                </van-field>
                <div
                    style="height: 4px; background-color: #f3f3f3; width: 100%;"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import {clearNoNum} from "../../../utils/util";
import {getAction} from "../../../api/manage";
import moment from "moment";
import Navbar from "../../../components/navBar/navBar_right";
import {
  getDistributeLatticeNotification,
  getLatticeNotificationProLoss,
  outboundTasksDetail,
  warehouseLatticeDetail,
  wmsPickingTaskAdd,
} from "../../../api/mobile";
import VanFieldSelectPicker from "@/components/ActionSheet/VanFieldSelectPicker";
import ContactPickers from "@/components/choiceuse/ContactPickers";
import GoodsPickers from "@/components/choiceuse/GoodsPickers";
import store from "@/store";
import scanInputGoods from "@/components/scanCode/scanInputGoods";
import produceOrderPickers from "@/components/choiceuse/produceOrderPickers";
import {APILX} from "@/api/requestLx";
import {workOrderList} from "@/api/productionApply";
import {getDictItemsByTypes} from "@/api/inventoryOrder";
import BinLocationPickersAk from "../../../components/choiceuse/BinLocationPickersAk";
import SelectList from "../../../components/pageList/selectList.vue";
import {getWarehouseLatticeDetail} from "../../../api/inventoryOrder";
import PDAsao from "@/components/scanCode/PDAsao.vue";

export default {
  name: "inventoryOrderForm",
  components: {
    Navbar,
    VanFieldSelectPicker,
    ContactPickers,
    GoodsPickers,
    scanInputGoods,
    produceOrderPickers,
    BinLocationPickersAk,
    SelectList,
    qrcode: () => import("@/components/scanCode"),
    PDAsao,
  },
  data() {
    return {
      showContactPickers: false,
      subLoading: false,
      userType: "picker", // sendPersion createBy picker
      tabsConfig: {
        all: false,
        showIndex: 0,
      },
      isshow: false,
      // 扫码相关
      codeForm: {
        qrcode: false,
        showClose: false,
      },
      torchActive: true,
      camera: "off",
      detailInfo: {unPickedDetailsList: []},
      detailInfoCount: [],
      activeIndex: 0,
      examKey: 1,
      asCheckedShow: true,
      //辅助单位
      buildForm: {
        entryCode: "",
        goodsCode: "",
        types: "SALE",
        produceOrderId: "",
        produceOrderName: "",
        saleOrderId: "",
        saleOrderName: "",
        receiverPersion: "",
        receiverPersionName: "",
        pickerNames: "",
        picker: "",
      },

      recentGoodsIndex: 0,
      recentLatticeIndex: 0,
      entryDetails: [],
      happenTime: new Date(),
      appTitle: "下发拣货",
      isEdit: false,
      parentId: "",
      showExam: true,
      warehousingTypes: [],
      selectShow: false,
      timePickShow: false,
      formTypeExtendedFields: [],
      goodsTypeExtendedFields: [],
      columnsData: {
        listShow: false, //控制列表选择显示
        title: "", //列表名称
        checkedShow: true, //列表是否支持多选
        operationTxt: "确定", //选择按钮名称
        listUrl: "/wmslattice/getDistributeLatticeNotification", //列表接口
        columns: {
          //列表是否使用插槽
          headSlot: true, //头部插槽
          bodySlot: true, //中间内容插槽
          labelSlot: false, //标签插槽
          footSlot: false, //底部插槽
          titleKey: ["latticeCode", "latticeName"], //标题
          min: 5,
          content: [
            //内容
            {
              name: "批号",
              key: ["batchCode"],
            },
            {
              name: "库存数量",
              key: ["stockNum"],
            },
            {
              name: "可用数量",
              key: [""],
            },
            {
              name: "锁定数量",
              key: ["lockQuantity"],
            },
          ],
          labelKey: [], //标签
          operationText: "",
          flowStatusNameKey: "dictName", //流程状态
          // 多种操作
          operation: [],
          // 固定且只有一个操作
          // operationText:'发起流程'
        },
      },
      showGoodsPicker: false,
      isShowLatticeNotification: false,
      listlatticeNotificationUrlUrl:
          "/wmslattice/getDistributeLatticeNotification",
      latticeNotificationUrl: "",
      latticeNotificationgColumns: {
        titleKey: ["latticeCode", "latticeName"], //标题
        content: [
          //内容
          {
            name: "批号",
            key: ["batchCode"],
          },
          {
            name: "库存数量",
            key: ["stock", "unitName"],
          },
          {
            name: "可用数量",
            key: ["available", "unitName"],
          },
          {
            name: "锁定数量",
            key: ["lockQuantity", "unitName"],
          },
          {
            name: "拣货数量",
            key: ["pickingQuantity"],
            // max: 0,
            type: "input",
          },
        ],
        labelKey: [], //标签
        operationText: "",
      },
      isGoHistory: true,
      allDownShow: false,
      listUrl: "/wmslattice/getDistributeLatticeNotification",
      goodsColumns: {
        titleKey: ["goodsCode", "goodsName", "spec"], //标题
        content: [
          //内容
          {
            name: "产地",
            key: ["address"],
          },
          {
            name: "包装规格",
            key: ["packageSpec"],
          },
          {
            name: "基本单位",
            key: ["unitName"],
          },
        ],
        // labelKey: ["updateTime", "serialSpecifications"], //标签
        operationText: "",
      },

      selectedSaleOrder: [],

      showProduceOrderPickers: false,
      selectedProduceOrder: [],
      active: "",
    };
  },
  beforeRouteLeave(to, from, next) {
    if (this.showPeopleSlect) {
      this.$refs.examine.closePicker();
      next(false);
    } else if (this.showGoodsPicker || this.showProduceOrderPickers) {
      this.showGoodsPicker = false;
      this.showProduceOrderPickers = false;
      this.appTitle = this.isEdit ? "下发拣货" : "新建出库任务";
      next(false);
    } else if (this.isShowLatticeNotification) {
      this.isShowLatticeNotification = false;
      this.appTitle = "下发拣货";
      next(false);
    } else {
      next();
    }
  },
  async created() {
    let _this = this;
    getDictItemsByTypes({type: 4}).then((res) => {
      if (res.code == 200 && res.result) {
        _this.warehousingTypes = res.result;
        console.log("类型", _this.warehousingTypes);
      }
    });
    // 扫工单码进入
    if (
        this.$route.query.formPage == "scanCode" &&
        this.$route.query.code.EntityType == "workOrder"
    ) {
      let itemRes = await workOrderList({id: this.$route.query.code.id});
      this.getCheckedProduceOrder(itemRes.result.records);
    }
    // 扫物品码进入
    if (
        this.$route.query.formPage == "scanCode" &&
        this.$route.query.code.EntityType == "goods"
    ) {
      this.changeScan(this.$route.query, "scan");
    }

    store.commit("SET_CURRENT_PREFIX", "/jksaas-produce/produce");
    if (this.$route.query.id) {
      this.isEdit = true;
      this.parentId = this.$route.query.id;
    } else {
      this.isEdit = false;
      this.parentId = "";
    }

    let currentLoginUser = JSON.parse(
        localStorage.getItem("pro__Login_Userinfo")
    ).value;
    console.log("currentLoginUser", currentLoginUser);
    this.buildForm.picker = currentLoginUser.id;
    this.buildForm.pickerNames = currentLoginUser.realname;
    if (this.parentId) {
      this.appTitle = "下发拣货";
    }
    this.initData();
  },
  watch: {
    detailInfos: {
      deep: true,
      immediate: true,
      handler(nVal, oVal) {
        console.log("新值", nVal);
        this.detailInfo.unPickedDetailsList.map((item, index) => {
          console.log("列表", item);
          let sumCount = item.inLatticeDtoList
              .map((it) => {
                return it.pickingQuantity;
              })
              .reduce(function (prev, curr, idx, arr) {
                if (!prev) {
                  prev = 0;
                }
                if (!curr) {
                  curr = 0;
                }
                return parseFloat(prev) + parseFloat(curr);
              });
          this.detailInfoCount[index] = sumCount;
          console.log(this.detailInfoCount);
          return {...item, sumCount};
        });
      },
    },
  },
  computed: {
    detailInfos() {
      this.detailInfo;

      console.log("值", this.detailInfo.unPickedDetailsList);
      return this.detailInfo;
    },
    pickTotal() {
      let total = 0;
      this.entryDetails[this.recentGoodsIndex].inLatticeDtoList.forEach(
          (item) => {
            if (item.pickingQuantity >= 0) {
              total += item.pickingQuantity * 1;
            }
          }
      );
      return total.toLocaleString();
    },
    maxTotal() {
      return (
          this.entryDetails[this.recentGoodsIndex].outboundGoodsNum -
          this.entryDetails[this.recentGoodsIndex].issuedNum -
          this.pickTotal
      );
    },
  },
  methods: {
    closeModel() {
      this.isshow = false;
      this.turnCameraOff();
    },
    // 删除库位
    deleteLattice(index, recListLength) {
      if (recListLength == 1) {
        return;
      }
      this.entryDetails[this.recentGoodsIndex]["inLatticeDtoList"].splice(
          index,
          1
      );
    },
    // 关闭相机
    turnCameraOff() {
      this.camera = "off";
      this.codeForm.qrcode = false;
    },
    // 打开相机
    clickCode(index, cIndex, isshow) {
      let that = this;
      // return
      let platform = localStorage.getItem("currentEnvironment");
      console.log("platform", platform, this.detailInfo.unPickedDetailsList);
      switch (platform) {
        case "iwork":
          var opt = {
            success: function (res) {
              console.log(JSON.stringify(res), "APP扫码数据");
              if (res.retCode == 0) {
                that.onDecode(res.retData);
              } else {
                that.$toast(res.retMsg);
              }
            },
            fail: function (err) {
              that.$toast("扫码失败！");
            },
          };
          //插件调用代码
          WorkHelper.scan(opt);
          break;
        case "browser":
          console.log("打开摄像头");
          // camera:: 'front'--前摄像头，'rear'后摄像头，'off'关闭摄像头，会获取最后一帧显示，'auto'开始获取摄像头
          that.codeForm.qrcode = true;
          that.camera = "rear";
          that.entryDetails = this.detailInfo.unPickedDetailsList;
          that.recentGoodsIndex = index;
          that.recentLatIndex = cIndex;
          that.isshow = isshow;
          break;
        case "dingding":
          dd.biz.util.scan({
            type: "qrCode", // type 为 all、qrCode、barCode，默认是all。
            onSuccess: function (data) {
              //onSuccess将在扫码成功之后回调
              that.onDecode(data.text);
            },
            onFail: function (err) {
              // console.error(err,'error')
            },
          });
          break;
        default:
          "";
          break;
      }
    },
    // 检查是否调用摄像头
    async onInit(promise) {
      try {
        await promise;
      } catch (error) {
        if (error.name === "StreamApiNotSupportedError") {
        } else if (error.name === "NotAllowedError") {
          this.errorMessage = "Hey! I need access to your camera";
        } else if (error.name === "NotFoundError") {
          this.errorMessage = "Do you even have a camera on your device?";
        } else if (error.name === "NotSupportedError") {
          this.errorMessage =
              "Seems like this page is served in non-secure context (HTTPS, localhost or file://)";
        } else if (error.name === "NotReadableError") {
          this.errorMessage =
              "Couldn't access your camera. Is it already in use?";
        } else if (error.name === "OverconstrainedError") {
          this.errorMessage =
              "Constraints don't match any installed camera. Did you asked for the front camera although there is none?";
        } else {
          this.errorMessage = "UNKNOWN ERROR: " + error.message;
        }
      }
    },
    // 激光扫码
    changeScan2(v) {
      if (v.EntityType == "lattice") {
        getWarehouseLatticeDetail(v.id).then((res) => {
          if (res.code == 200 && res.result) {
            if (res.result.status == "effective") {
              let {id, latticeCode, latticeName} = res.result;
              let recLatIndex = this.entryDetails[this.active][
                  "inLatticeDtoList"
                  ].findIndex((ele) => ele.latticeId == id);
              if (recLatIndex == -1) {
                let obj = {
                  latticeId: id,
                  latticeCode: latticeCode,
                  latticeName: latticeName,
                  latticeFullName: latticeCode + "|" + latticeName,
                  shelvedNum: this.entryDetails[this.active]["unShelvedNum"],
                };
                this.entryDetails[this.active]["inLatticeDtoList"].push(obj);
              } else {
                this.$toast("该库位已存在");
              }
            } else {
              this.$toast("该库位处于禁用状态");
            }
          } else {
            this.$toast("数据异常");
          }
        });
      }
    },
    addKwItem(initialArray, newItems) {
      console.log("initialArray", initialArray);
      newItems.forEach((newItem) => {
        newItem.latticeId = newItem.id;
        const existingItem = initialArray.find(
            (item) => item.latticeId === newItem.id && item.batchCode === newItem.batchCode
        );
        if (existingItem) {
          console.log("existingItem", existingItem);
          this.$toast(
              `扫描的库位已存在`
          );
        } else {
          console.log("existingItem", existingItem);
          // console.log('newItem', newItem)
          initialArray.push({
            latticeId: newItem.id,
            latticeCode: newItem.latticeCode,
            goodsBatchId: newItem.goodsBatchId,
            batchCode: newItem.batchCode,
            latticeName: newItem.latticeName,
            latticeFullName: newItem.latticeCode + "|" + newItem.latticeName,
            pickingQuantity: newItem.available,
            available: newItem.available,
          });
          this.$toast("库位扫描成功");
        }
      });

      this.codeForm.qrcode = true;
      this.camera = "rear";
      this.isshow = true;
    },
    // 扫码结果回调
    onDecode(result) {
      console.log(result, "result");
      // result, 扫描结果，可以根据自己的需求来实现相应的功能
      this.codeForm.code = JSON.parse(result);
      //1.校验扫的二维码，是库位二维码、
      if (this.codeForm.code.EntityType == "lattice" && this.codeForm.code.id) {
        //2.扫到库位二维码时，校验该库位是否正在盘点，若正在盘点，则校验不通过，并toast“该库位正在盘点，无法出库”；
        //3.校验物品及批号（若物品TAB没有批号，则该条件不限制）在当前库位中国的对应的可用数量是否大于0，若不大于0则校验不通过，并toast“该物品、库位的可用数量不足，无法拣货”；
        //4.1若校验通过，则把符合条件的库位、批号、可用数量回显，把对应的批号回填到拣货批号，把可用数量回填到拣货数量。已经存在的库位及批号的组合不再回显。
        //4.2且库位中的物品及批号（若物品TAB没有批号，则该条件不限制）对应的可用数量大于0的有该物品TAB，且不是正在盘点的，则检验成功。
        //4.3则把符合条件的库位、批号、可用数量回显，把对应的批号回填到拣货批号，把可用数量回填到拣货数量。
        //5.物品、拣货库位、拣货批号的组合不能重复，若扫到已存在的，则提示“该库位及批号已存在”
        // 库位二维码
        warehouseLatticeDetail(this.codeForm.code.id).then((res) => {
          if (res.code == 200 && res.result) {
            // if (res.result.status == 'effective') {
            // let isValidated = true;
            // try {
            //   this.entryDetails[this.recentGoodsIndex][
            //       "inLatticeDtoList"
            //       ].forEach((ele) => {
            //     // if (ele.latticeId == res.result.id) {
            //     //   this.isValidated = false;
            //     //   this.codeForm.qrcode = true;
            //     //   this.camera = "rear";
            //     //   this.isshow = true;
            //     //   throw new Error(`该库位已存在`);
            //     // }
            //   });
            //   // if (!isValidated) {
            //   //   return;
            //   // }
            // } catch (error) {
            //   this.$toast(error.message);
            //   return false;
            // }

            if (this.isshow) {
              console.log('this.entryDetails[this.recentGoodsIndex]', this.entryDetails[this.recentGoodsIndex])
              getDistributeLatticeNotification({
                goodsId: this.entryDetails[this.recentGoodsIndex].goodsId,
                batchCode: this.entryDetails[this.recentGoodsIndex].batchCode,
                latticeId: this.codeForm.code.id,
              }).then(res => {
                let list = res.result.records
                if (!list.length) {
                  this.$toast('未查询到对应商品所在库位')
                  this.codeForm.qrcode = true;
                  this.camera = "rear";
                  this.isshow = true;
                  return
                }

                this.addKwItem(this.entryDetails[this.recentGoodsIndex]["inLatticeDtoList"], res.result.records)
              })
            } else {
              // 单个扫码-库位
              let {id, latticeCode, latticeName} = res.result;
              this.entryDetails[this.recentGoodsIndex]["inLatticeDtoList"][
                  this.recentLatIndex
                  ] = {
                latticeId: id,
                latticeCode: latticeCode,
                latticeName: latticeName,
                latticeFullName: latticeCode + "|" + latticeName,
                pickingQuantity: this.entryDetails[this.recentGoodsIndex][
                    "pickingQuantity"
                    ],
              };
              this.turnCameraOff();
            }
            // } else {
            //   this.$toast("该库位已被禁用");
            //   this.clickCode(this.recentGoodsIndex);
            // }
          } else {
            this.$toast(res.message);
          }
        });
      } else {
        this.$toast("请扫正确二维码");
      }

      // this.codeForm.qrcode = true;
      // this.camera = "rear";
      // this.isshow = true;
    },
    // 打开手电筒
    ClickFlash() {
      switch (this.torchActive) {
        case true:
          this.torchActive = false;
          break;
        case false:
          this.torchActive = true;
          break;
        default:
          this.$toast("错误");
      }
    },
    // 相机反转
    switchCamera() {
      switch (this.camera) {
        case "front":
          this.camera = "rear";
          break;
        case "rear":
          this.camera = "front";
          break;
        default:
          this.$toast("错误");
      }
    },
    // tag 弹出层相关功能
    openDropDownModel() {
      this.allDownShow = true;
    },
    closeDropDownModel() {
      this.allDownShow = false;
    },
    clickGoodsNames(item) {
      this.active = item.goodsKey;
      console.log(item, item.goodsKey);
      this.allDownShow = false;
    },
    // 确认选中库位
    async getCheckedValues(list) {
      this.isShowLatticeNotification = false;
      let entryDetails = this.detailInfo.unPickedDetailsList[
          this.recentGoodsIndex
          ];
      console.log(entryDetails, list, '0000');
      this.detailInfo.unPickedDetailsList[this.recentGoodsIndex][
          "inLatticeDtoList"
          ] = list.map((son) => {

        let recIndex = -1
        if (entryDetails && entryDetails["inLatticeDtoList"]) {
          recIndex = entryDetails["inLatticeDtoList"].findIndex(
              (ele) =>
                  ele.latticeId == son.id && ele.goodsBatchId == son.goodsBatchId
          );
        }


        if (recIndex != -1) {
          let recObj = entryDetails["inLatticeDtoList"][recIndex];
          return recObj;
        } else {
          let {id, latticeCode, latticeName} = son;
          return {
            ...son,
            latticeId: id,
            latticeCode: latticeCode,
            latticeName: latticeName,
            latticeFullName: latticeCode + "|" + latticeName,
            goodsNum: "",
          };
        }
      });
      this.appTitle = this.isEdit ? "下发拣货" : "新建出库任务";
    },
    async getSelectListValues(id, list, text) {
      console.log("list", list);

      this.isShowLatticeNotification = false;
      let entryDetails = this.detailInfo.unPickedDetailsList[
          this.recentGoodsIndex
          ];
      console.log(entryDetails);
      this.detailInfo.unPickedDetailsList[this.recentGoodsIndex][
          "inLatticeDtoList"
          ] = list.map((son) => {
        let recIndex = entryDetails["inLatticeDtoList"].findIndex(
            (ele) => ele.latticeId == son.id
        );

        if (recIndex != -1) {
          let recObj = entryDetails["inLatticeDtoList"][recIndex];
          return recObj;
        } else {
          let {id, latticeCode, latticeName} = son;
          return {
            ...son,

            latticeId: id,
            latticeCode: latticeCode,
            latticeName: latticeName,
            latticeFullName: latticeCode + "|" + latticeName,
            goodsNum: "",
          };
        }
      });
    },
    // 确认选中库位
    async getCheckedValue(id, son, text) {
      console.log("点击：", id, son);
      this.isShowLatticeNotification = false;
      let entryDetails = this.detailInfo.unPickedDetailsList[
          this.recentGoodsIndex
          ];
      let recIndex = entryDetails["inLatticeDtoList"].findIndex(
          (ele) => ele.latticeId == son.id
      );
      if (recIndex != -1) {
        let recObj = entryDetails["inLatticeDtoList"][recIndex];
        recObj.batchCode = son.batchCode;
        recObj.pickingQuantity = son.available;
        recObj.max = son.available;
        console.log("recObj", recObj);
        return recObj;
      } else {
        let {id, latticeCode, latticeName, batchCode} = son;
        this.detailInfo.unPickedDetailsList[this.recentGoodsIndex][
            "inLatticeDtoList"
            ][this.recentLatticeIndex] = {
          ...son,
          latticeId: id,
          latticeCode: latticeCode,
          latticeName: latticeName,
          latticeFullName: latticeCode + "|" + latticeName,
          goodsNum: son.goodsNum,
          batchCode: batchCode,
          max: son.goodsNum,
        };
      }
      console.log(
          this.detailInfo.unPickedDetailsList,
          "this.detailInfo.unPickedDetailsList"
      );
      this.$forceUpdate();
    },
    newClearNoNum(value, maxValue) {
      console.log(value, maxValue);
      //先把非数字的都替换掉，除了数字和.
      value = value.replace(/[^\d.]/g, "");
      //保证只有出现一个.而没有多个.
      value = value.replace(/\.{2,}/g, ".");
      //必须保证第一个为数字而不是.
      value = value.replace(/^\./g, "");
      //保证.只出现一次，而不能出现两次以上
      value = value
          .replace(".", "$#$")
          .replace(/\./g, "")
          .replace("$#$", ".");
      //只能输入四个小数
      value = value.replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, "$1$2.$3");
      // console.log(value.includes('.'),'wwwwww')
      //小数位处理
      if (value.substring(0, 1) == "0" && value.substring(0, 2) != "0.") {
        value = "0";
      }
      //输入长度控制
      if (value > 9999999999.9999) {
        value = value.substring(0, 10);
        this.$toast("最多可输入14个字符，小数点后4位");
      }

      if (value > maxValue) {
        value = maxValue > 0 ? maxValue : "";
        // this.$toast("不能输入大于该库位下的库存数量");
      }

      this.$forceUpdate();
      return value;
    },
    // 人员选择 清空
    onClearChooseUsers(userType) {
      this.userType = userType;
      let userNamesKey = this.userType + "Names";

      this.buildForm[userNamesKey] = ""; // 人员name字符串
      this.buildForm[this.userType] = ""; //人员id
    },
    // 人员选择 确认选择回调
    confirmChooseUsers(val, selectedList, judge) {
      if (judge) {
        this.showContactPickers = false;
        return;
      }
      let userNamesKey = this.userType + "Names";
      let arr = [];

      if (selectedList) {
        selectedList.forEach((item) => {
          arr.push(item.realname);
        });
      }

      this.buildForm[userNamesKey] = arr.join(","); // 人员name字符串
      this.buildForm[this.userType] = val ? val : ""; //人员id

      this.showContactPickers = false;
    },
    // 人员选择 关闭
    onCloseContactPickers(userType) {
      this.userType = userType;
      this.showContactPickers = false;
    },
    // 人员选择 打开
    onShowContactPickers(userType) {
      this.userType = userType;
      this.showContactPickers = true;
    },
    //已下发拣货跳转
    GoReceiptedGoods(e) {
      this.$router.push({
        path: "/outboundTasksAlready",
        query: {
          id: this.$route.query.id,
        },
      });
    },
    // 库位选择
    showLatticeNotificatios(index) {
      console.log("index", index);
      this.isShowLatticeNotification = true;
      this.recentGoodsIndex = index;
      this.asCheckedShow = true;
      this.appTitle = "库位";
    },
    operationItem() {
    },
    // 库位选择
    showLatticeNotification(index, i, p) {
      this.isShowLatticeNotification = true;
      this.recentGoodsIndex = index;
      this.recentLatticeIndex = i;
      this.asCheckedShow = false;
      let act = this.detailInfo.unPickedDetailsList[index]
      console.log(act, 'p')
      if (act.batchCode) {
        this.latticeNotificationUrl = this.listlatticeNotificationUrlUrl + `?goodsId=${act.goodsId}&goodsBatchId=${act.goodsBatchId}`
      }
    },
    // 物品明细-》删除
    deleteGoods(i) {
      this.entryDetails.splice(i, 1);
    },
    // 物品明细-》删除
    deleteGoodsLett(index, i, item) {
      if (item.inLatticeDtoList.length <= 1) {
        return;
      }
      this.detailInfo.unPickedDetailsList[index]["inLatticeDtoList"].splice(
          i,
          1
      );
    },
    //出库类型选择
    selectReport(itemReport, key) {
      if (itemReport) {
        this.buildForm[key] = itemReport.value;
      } else {
        this.buildForm[key] = "";
      }
    },
    // 打开选择时间
    openTimePicker(index, value) {
      this.timePickShow = true;
      this.recentGoodsIndex = index;
      if (value) {
        this.happenTime = value;
      } else {
        this.happenTime = "";
      }
    },
    blurPickQuantity(p) {
      console.log(p.pickingQuantity)
      if (p.pickingQuantity == 0) {
        p.pickingQuantity = ""
        this.$forceUpdate()
        this.$toast('拣货数量必须大于0')
      }
    },
    // 提交 - 表单验证
    btnConfirm() {
      console.log(
          " this.detailInfo.unPickedDetailsList",
          this.detailInfo.unPickedDetailsList
      );
      try {
        // 出库物品明细 为空 选项名称、数量 表单验证
        if (
            this.detailInfo.unPickedDetailsList &&
            this.detailInfo.unPickedDetailsList.length > 0
        ) {
          // this.detailInfo.unPickedDetailsList.forEach((element, idx) => {
          //   if (!element.inLatticeDtoList||(element.inLatticeDtoList&&!element.inLatticeDtoList.length)) {
          //     // throw new Error(`（${element.goodsName}）库位不可为空`);
          //   }
          //   element.inLatticeDtoList.forEach((item, index) => {
          //     if (!item.pickingQuantity || item.pickingQuantity == "") {
          //       throw new Error(
          //           `${element.goodsName}-库位（${index + 1}）拣货数量不可为空`
          //       );
          //     }
          //   });
          // });
        } else {
          // throw new Error(`请选择物品2`);
        }
      } catch (error) {
        this.$toast(error.message);
        return false;
      }
      this.handleSubmit();
    },
    handleSubmit() {
      let deatailsList = [];
      console.log(
          this.detailInfo.unPickedDetailsList,
          " this.detailInfo.unPickedDetailsList"
      );
      this.detailInfo.unPickedDetailsList.forEach((element, index) => {
        if (element.inLatticeDtoList) {
          element.inLatticeDtoList.forEach((item, index) => {
            if (element.inLatticeDtoList && item.goodsBatchId && item.pickingQuantity) {
              deatailsList.push({
                goodsBatchId: item.goodsBatchId,
                latticeId: item.latticeId,
                pickingQuantity: item.pickingQuantity,
                taskDetailId: element.detailsId,
              });
            }
          });
        }
      });
      let params = {
        ...this.buildForm,
        outboundTaskId: this.$route.query.id,
        deatailsList,
      };

      let commitApi = "";
      let successMeg = "";
      if (this.parentId) {
        params.id = this.parentId;
        commitApi = wmsPickingTaskAdd;
        successMeg = "下发拣货成功！";
      } else {
        commitApi = wmsPickingTaskAdd;
        successMeg = "出库单创建成功！";
      }
      this.subLoading = true
      commitApi(params).then((res) => {
        if (res.success) {
          this.reloadData();
          this.initData();
          this.$toast(successMeg);
        } else {
          this.$toast(res.message);
        }
      }).finally(() => {
        this.subLoading = false
      })
    },
    reloadData() {
      this.detailInfo.unPickedDetailsList.forEach((item) => {
        item.inLatticeDtoList.forEach((ele) => {
          ele.latticeName = "";
          ele.batchCode = "";
          ele.pickingQuantity = "";
        });
      });
      this.$forceUpdate();
    },
    pickedClick(item, index) {
      this.tabsConfig.showIndex = index;
      this.latticeNotificationUrl =
          this.listlatticeNotificationUrlUrl + `?goodsId=${item.goodsId}`
      this.columnsData.listUrl =
          this.listlatticeNotificationUrlUrl + `?goodsId=${item.goodsId}`;
    },
    changeTab(e) {
      let item = this.detailInfo.unPickedDetailsList.find(item => item.goodsKey === e)
      console.log(this.active, 'w222', item)
      this.latticeNotificationUrl =
          this.listlatticeNotificationUrlUrl + `?goodsId=${item.goodsId}`
    },
    // 初始化页面数据
    initData() {
      // 获取出库类型
      // outboundOrderTypeList().then((res) => {
      //   if (res.code == 200 && res.result) {
      //     this.warehousingTypes = res.result;
      //   }
      // });
      let id = this.$route.query.id;
      outboundTasksDetail({id: id, type: "pick"}).then((res) => {
        if (res.code == 200 && res.result) {
          this.detailInfo = res.result;
          let recTime = moment(new Date()).format("YYYY-MM-DD");

          let unPickedDetailsList = this.detailInfo.unPickedDetailsList || [];
          console.log("unPickedDetailsList", unPickedDetailsList);
          this.detailInfo.unPickedDetailsList = unPickedDetailsList.map(
              (son, index) => {
                let {
                  goodsId,
                  batchCode,
                  goodsBatchId,
                  produceDate,
                  recommendLattices,
                } = son;
                if (recommendLattices && recommendLattices.length) {
                  recommendLattices.forEach((lat) => {
                    lat.pickingQuantity = lat.goodsNum;
                    lat.max = lat.goodsNum;
                  });
                  // recommendLattices = recommendLattices.filter(item => item.latticeId)
                }

                return {
                  goodsKey: goodsId + "_" + index,
                  goodsId: goodsId || "",
                  ...son,
                  batchCode: batchCode,
                  goodsBatchId: goodsBatchId || "",
                  produceDate: produceDate,
                  inLatticeDtoList: recommendLattices
                };
              }
          );
          console.log(
              "detailInfo.unPickedDetailsList",
              this.detailInfo.unPickedDetailsList
          );
          this.detailInfo.pickedDetailsList =
              this.detailInfo.pickedDetailsList || [];
          // this.entryDetails = res.result.detailsList;
          if (this.detailInfo.unPickedDetailsList.length > 0) {
            this.pickedClick(this.detailInfo.unPickedDetailsList[0], 0);
          }
        } else {
          // this.$toast(res.message);
        }
      });
    },

    formatter(type, val) {
      if (type === "year") {
        return val + "年";
      }
      if (type === "month") {
        return val + "月";
      }
      if (type === "day") {
        return val + "日";
      }
      if (type === "hour") {
        return val + "时";
      }
      if (type === "minute") {
        return val + "分";
      }
      return val;
    },
    // 出库物品明细-》添加
    addInventoryGoods() {
      this.appTitle = "选择物品";
      this.showGoodsPicker = true;
    },
    // 出库物品明细-》物品弹出层
    // projectVisible() {
    //   this.appTitle = "出库物品选择";
    //   this.showGoodsPicker = true;
    // },

    // 确认选中物品
    async getCheckedGoods(list) {
      this.showGoodsPicker = false;
      this.appTitle = this.isEdit ? "下发拣货" : "新建出库任务";

      this.entryDetails = list.map((son) => {
        let recIndex = this.entryDetails.findIndex(
            (ele) => ele.serialId == son.id
        );

        if (recIndex != -1) {
          let recObj = this.entryDetails[recIndex];
          return recObj;
        } else {
          return {
            serialId: son.id,
            serialLongName: son.serialNumber + "|" + son.serialName,
            serialName: son.serialName || "-",
            serialNumber: son.serialNumber || "-",
            serialSpecifications: son.serialSpecifications || "-",
            serialUnit: son.unitName || "-",
            inWarehouseNum: null,
          };
        }
      });
    },
    // 扫码获取物品
    changeScan(v, opratorType) {
      if (opratorType == "scan") {
        if (v.code.EntityType !== "goods") {
          this.$toast("请扫正确二维码");
          return;
        }
        getAction("/basicserial/basicSerialInfo/queryById", {
          id: v.code.id,
        }).then((res) => {
          if (res.code == 200 && res.result) {
            let ids = this.entryDetails.map((item) => item.serialId);
            if (ids.includes(res.result.id)) {
              this.$toast("该物品已存在");
              return;
            } else {
              let {
                id,
                serialName,
                serialNumber,
                serialSpecifications,
                unitName,
              } = res.result;
              let newGoods = {
                serialId: id,
                serialLongName: serialName + "|" + serialNumber,
                serialName: serialName || "-",
                serialNumber: serialNumber || "-",
                serialSpecifications: serialSpecifications || "-",
                serialUnit: unitName || "-",
                inWarehouseNum: null,
              };
              if (this.entryDetails && this.entryDetails.length == 1) {
                if (!this.entryDetails[0].serialId) {
                  this.entryDetails = [];
                  this.entryDetails.push(newGoods);
                } else {
                  this.entryDetails.push(newGoods);
                }
              } else {
                this.entryDetails.push(newGoods);
              }
              this.$forceUpdate();
            }
          }
        });
      }
    },

    // 确认选中生产工单
    async getCheckedProduceOrder(list) {
      if (!list[0].id) {
        return;
      } else {
        this.buildForm.produceOrderId = list[0].id;
        this.buildForm.produceOrderName = list[0].orderCode;
        this.selectedProduceOrder = list;
      }
      this.showProduceOrderPickers = false;
      this.appTitle = this.$route.meta.title;

      APILX.produceOrderInfoQueryById({id: list[0].id}).then((res) => {
        if (res.code == 200) {
          this.entryDetails = [
            ...res.result.records.map((item) => {
              let {
                serialId,
                serialName,
                serialNumber,
                serialSpecifications,
                unitName,
                planProduceNum,
                maxQualifiedNum,
              } = item;
              return {
                serialId: serialId,
                serialLongName: serialNumber + "|" + serialName,
                serialName: serialName || "-",
                serialNumber: serialNumber || "-",
                serialSpecifications: serialSpecifications || "-",
                serialUnit: unitName || "-",
                inWarehouseNum: maxQualifiedNum,
              };
            }),
          ];
        } else {
          this.$toast(res.message);
        }
      });
    },

    // 出库单 物品明细 数量处理
    needOutNumChange(e) {
      return clearNoNum(e);
    },

    ClickRight() {
      this.showGoodsPicker = false;
      this.$router.push({
        path: "/application",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/theme.scss";
@import "@/views/workManagement/materialRequisition/materialForm.scss";

.wrap-apply {
  /deep/ .van-field__control--right {
    text-align: right !important;
  }
}

.tabs-contain {
  position: relative;

  /deep/ .van-tabs__nav--line.van-tabs__nav--complete {
    width: calc(100% - 120px);
  }

  /deep/ .van-tabs__wrap--scrollable .van-tab {
    width: 33%;
    min-width: 230px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .all-down-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 90px;
    font-size: 28px;
    color: rgb(25, 137, 250);
    line-height: 90px;
    text-align: center;
    background-color: #fff;

    /deep/ .van-icon {
      top: 6px;
    }
  }

  .all-down-model {
    position: absolute;
    top: 0;
    right: 0;
    width: 100vw;
    background-color: #fff;
    z-index: 9;
    border-bottom: 1px solid #f3f3f3;
    padding: 6px;

    .tags-contain {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 10px;

      .goodsNameTag {
        width: 22%;
        margin: 10px 10px;
        padding: 5px 20px;
        background-color: #f3f3f3;
        color: #333333;
        border-radius: 5px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        text-align: center;
        height: 60px;
        line-height: 42px;
      }
    }

    .ctrBtn-contian {
      height: 50px;
      text-align: center;
      color: #1890ff;
      font-size: 24px;
      line-height: 50px;

      /deep/ .van-icon {
        top: 6px;
      }
    }
  }
}

.form-content {
  width: 100%;
  height: calc(100vh - 203px);
  background: #f5f5f5;
  overflow: scroll;
  padding: 20px 0;

  .label {
    padding: 0.2rem 0 0.32rem;
  }

  .formgroup {
    background: #ffffff;
    // padding: 0 0.16rem;
    margin-top: 0.1rem;
    margin-bottom: 0.2rem;
    padding-top: 0.1rem;

    .title {
      width: 0.58rem;
      height: 0.14rem;
      font-size: 0.15rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191f25;
      line-height: 0.05rem;
      margin-left: 0.16rem;
    }
  }

  .search-bottoms {
    width: 100%;
    height: 100px;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0px;
    padding: 0rem 11px;
    box-sizing: border-box;
    font-size: 32px;
    font-weight: 500;
    z-index: 9;

    .btnconfirm {
      flex: 1;
      background: #1890ff;
      box-sizing: border-box;
      height: 78px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 6px;
      color: #ffffff;
    }
  }
}

.bottomLine {
  height: 1px;
  background-color: #f2f2f2;
  margin: 0 2px;
}

.otherText {
  display: flex;
  justify-content: space-between;
  font-size: 32px;
  font-weight: bold;
  color: #191f25;

  .deleteStyle {
    font-weight: 400;
    color: #ff4d4f;
    font-size: 28px;
  }
}

.haveUnitBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding-right: 32px;

  /deep/ .van-cell {
    padding-right: 0;
    width: 600px;
  }

  /deep/ .van-field__control {
    max-width: 700px;
  }
}

/deep/ .van-nav-bar {
  z-index: 99;
}

/deep/ .van-sidebar-item--select::before {
  color: #1890ff;
  background-color: #1890ff;
}

/deep/ .van-tree-select__item--active {
  color: #1890ff;
}

/deep/ .tabs-contain {
  height: 1px;
  background-color: #f2f2f2;
  margin: 0 2px;
}

.addGoodScontain {
  display: flex;
  flex-wrap: nowrap;

  .addgoods {
    flex: 1;
    background: #fff;
    font-size: 32px;
    text-align: center;
    height: 78px;
    line-height: 78px;
    color: #1890ff;
  }
}

.required span::after {
  left: -20px;
  top: 3px;
}

.filedClear {
  width: 28px;
  height: 28px;
}

.list {
  margin-top: 10px;
}

.wrap {
  background: #fff;
  // margin: 24px 0;
  padding: 20px;
  //width: 100vw;

  .top {
    display: flex;
    justify-content: flex-start;

    .icon {
      width: 6px;
      height: 36px;
      background: #1890ff;
      margin-top: 6px;
      margin-right: 20px;
    }

    .title {
      width: 620px;
      margin-right: 20px;
      font-size: 32px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #191f25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .title-m {
      margin-left: 0.3rem;
    }

    .spot img {
      width: 40px;
      height: 40px;
    }
  }

  .center {
    p {
      margin: 16px 25px;
      font-size: 28px;
      display: flex;
      position: relative;

      .key {
        color: #888888;
      }

      .value {
        color: #191f25;
        width: 380px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .arrow {
        color: #1890ff;
        // float: right;
        // margin-right: -0.05rem;
        // display: block;
        position: absolute;
        right: -10px;
      }
    }

    .showAll {
      background: #f5f8ff;
      width: 100vw;
      margin-left: -0.15rem;
      padding: 0.15rem;
      margin-bottom: 0.15rem;
    }

    .fontAno {
      font-size: 30px;
      padding-left: 20px;
    }
  }

  .label {
    margin-left: -0.03rem;
    margin-top: -0.1rem;
    margin-bottom: 10px;

    span {
      height: 0.16rem;
      background: #f0f6fe;
      color: #1890ff;
      margin-right: 0.1rem;
      padding: 0.03rem 0.08rem;
      font-size: 0.2rem;
      border-radius: 0.03rem;
    }
  }

  .foot {
    // height: 0.33rem;
    // line-height: 0.33rem;
    display: flex;
    justify-content: space-between;
    // margin: 0.15rem 0.12rem 0 0.12rem;
    font-size: 0.14rem;

    .pictures {
      width: 0.33rem;
      height: 0.33rem;
      line-height: 0.33rem;
      text-align: center;
      color: #fff;
      background: #1890ff;
      display: block;
      border-radius: 0.06rem;
      font-size: 0.12rem;
      margin-right: 0.1rem;
    }

    .text {
      width: 1rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .opera {
      color: #1890ff;
      font-size: 0.14rem;
    }
  }
}

.tabs-box-rel {
  position: relative;
  height: 22.51px;

  .tabs-up {
    position: absolute;
    width: 100%;
    background: #fff;
  }
}

.tabs-box {
  .tabs {
    display: flex;
    flex-wrap: wrap;

    .tab {
      width: 25%;
      text-align: center;
      font-size: 0.4rem;
      cursor: pointer;
      padding: 20px 0;
    }

    .tabsAll {
      color: #1890ff;
      z-index: 20;
    }

    .active {
      color: #1890ff;
    }
  }

  .arrow-up-tab {
    color: #1890ff;
    text-align: center;
    font-size: 0.4rem;
  }
}

.selectList {
  .content {
    display: flex;
    padding: 0.15rem;

    .left {
      img {
        width: 0.55rem;
        height: 0.55rem;
        border-radius: 0.05rem;
      }
    }

    .right {
      width: 2.3rem;
      margin-left: 0.15rem;

      .top {
        display: flex;
        font-size: 0.16rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #191f25;

        .code {
          width: 2.5rem;
          margin-bottom: 0.08rem;
          //   overflow: hidden;
          //   text-overflow: ellipsis;
          //   white-space: nowrap;
        }

        img {
          height: 0.18rem;
          margin-top: 0.03rem;
          //   float: right;
        }
      }

      .btn {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;

        div {
          width: 50%;

          .key {
            font-size: 0.14rem;
            color: #8888;
            margin-bottom: 0.05rem;
          }

          .val {
            color: #191f25;
            font-size: 0.16rem;
            margin-bottom: 0.05rem;
          }
        }
      }
    }
  }
}

.qrcodeModel {
  .nav_contain {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ceced1;
    height: 80px;
    align-items: center;
    padding: 0 20px;

    span {
      font-size: 32px;
    }

    .left {
      color: #3ba1ff;
    }

    .center {
      color: #191f25;
      font-weight: bolder;
    }

    .right {
      color: #3ba1ff;
    }
  }

  .kw-list {
    height: calc(50vh - 80px);
    overflow-y: auto;

    .wrap {
      background: #fff;
      width: 100vw;

      .otherText {
        display: flex;
        justify-content: space-between;
        font-size: 32px;
        color: #191f25;
        margin: 0;
        font-weight: 500;

        .deleteStyle {
          font-weight: 400;
          color: #ff4d4f;
        }
      }

      .top {
        display: flex;
        justify-content: flex-start;
        padding-top: 10px;

        .icon {
          width: 6px;
          height: 32px;
          background: #1890ff;
          margin: 6px 10px 0 10px;
        }

        .title {
          width: 602px;
          margin-right: 20px;
          font-size: 30px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #191f25;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .titleWidth {
          width: 600px;
          margin: 0 25px;
        }
      }

      .center {
        margin: 0 0 30px;

        p {
          margin: 6px 25px;
          font-size: 28px;
          display: flex;
          position: relative;

          .key {
            color: #888888;
          }

          .value {
            color: #191f25;
            width: 380px;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .arrow {
            color: #1890ff;
            position: absolute;
            right: -10px;
          }

          /deep/ .van-tag {
            margin-right: 10px;
            //width: 160px;
            flex-direction: column;
            padding: 2px 0;
          }
        }
      }
    }
  }

  .list {
    .wrap {
      background: #fff;
      width: 100vw;

      .otherText {
        display: flex;
        justify-content: space-between;
        font-size: 32px;
        color: #191f25;
        margin: 0;
        font-weight: 500;

        .deleteStyle {
          font-weight: 400;
          color: #ff4d4f;
        }
      }

      .top {
        display: flex;
        justify-content: flex-start;
        padding-top: 10px;

        .icon {
          width: 6px;
          height: 32px;
          background: #1890ff;
          margin: 6px 10px 0 10px;
        }

        .title {
          width: 602px;
          margin-right: 20px;
          font-size: 30px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #191f25;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .titleWidth {
          width: 600px;
          margin: 0 25px;
        }
      }

      .center {
        margin: 0 0 30px;

        p {
          margin: 6px 25px;
          font-size: 28px;
          display: flex;
          position: relative;

          .key {
            color: #888888;
          }

          .value {
            color: #191f25;
            width: 380px;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .arrow {
            color: #1890ff;
            position: absolute;
            right: -10px;
          }

          /deep/ .van-tag {
            margin-right: 10px;
            //width: 160px;
            flex-direction: column;
            padding: 2px 0;
          }
        }
      }
    }
  }
}

.icon {
  width: 6px;
  height: 32px;
  background: #1890ff;
  margin-top: 6px;
  margin-right: 20px;
}

.kw-style /deep/ .van-cell {
  padding: 0.26667rem 0.2667rem;
}

.tag-style {
  padding: 0 0.42667rem 0 0.35rem;
  margin-bottom: 15px;

  span {
    height: 0.16rem;
    background: #f0f6fe;
    color: #1890ff;
    margin-right: 0.1rem;
    padding: 0.03rem 0.08rem;
    font-size: 28px;
    border-radius: 0.03rem;
  }
}
</style>
